<template>
	<view class="content box" :style="[{minHeight: MinHeight+'px'}]">
		<view class="top">
			<view class="tn-padding-sm  tn-text-xl-xxl" style="height: 100%;line-height: 200rpx;">
				<!-- {{details.name}} -->
			</view>
		</view>
		<view class="tn-padding-sm bootm">
			<view class="tn-padding-sm">
				<view class="tn-b-f tn-padding-sm">
					<view class="tn-flex tn-flex-row-between">
						<view class="tn-text-xxl tn-text-bold"> {{details.name}}</view>
						<view class="tn-text-right tn-text-xxl prompt">面议</view>
					</view>
					<view class="tn-text-xl tn-margin-top-sm name">
						{{details.description}}
					</view>
				</view>
			</view>
			<view class="tn-padding-sm">
				<view class="tn-b-f tn-padding-sm">
					<view class="Information">
						<text class="tn-icon-my tn-padding-xs iconSzie"></text>
						<text class="tn-text-md">{{details.contactName}}</text>
					</view>
					<view class="Information ">
						<text class="tn-icon-phone tn-padding-xs iconSzie"></text>
						<text class="tn-text-md">{{details.contactMobile}}</text>
					</view>
					<!-- 	<view class="">
				<text class="tn-icon-email-fill"></text>
				<text>xxxx</text>
				</view> -->
					<view class="Information">
						<text class="tn-icon-empty-address tn-padding-xs iconSzie"></text>
						<text class="tn-text-md">{{details.contactAddress}}</text>
					</view>
				</view>
			</view>
			<view class="tn-padding-sm " id="detailImg">
				<view class="tn-b-f tn-padding-sm image" >
					<!-- 详细信息 -->
					<image :src="details.detail"></image>
				</view>
			</view>
		</view>

		<tn-goods-nav fixed :options="customOptions" safeAreaInsetBottom height="100" buttonType="round"
			:buttonGroups="customButtonGroups" @optionClick="optionClick" @buttonClick="onButtClick"></tn-goods-nav>
	</view>
</template>

<script>
	import {
		GetenterpriseId
	} from '@/api/enterprise/enterprise.js'
	export default {
		data() {
			return {
				customOptions: [{
					icon: 'phone',
					text: '电话',
					iconColor: '#838383',
					fontColor: '#080808'
				}, {
					icon: 'star',
					text: '收藏',
					iconColor: '#838383',
					fontColor: '#080808'
				}],
				customButtonGroups: [{
					text: '申请服务',
					backgroundColor: '#228fee',
					color: '#FFFFFF'
				}],
				leftid: '',
				cateid: '',
				details: '',
				MinHeight: ''
			}
		},
		onLoad(options) {
			this.leftid = parseInt(options.leftid);
			this.cateid = parseInt(options.cateid)
		},
		onShow() {
			this.getenterpriseId()
		},
		mounted() {
			this.DomRect()
		},
		methods: {
			//图片高度
			DomRect() {
				let view = uni.createSelectorQuery().in(this)
				view.select('#detailImg').boundingClientRect()
				view.exec((res) => {
					this.MinHeight = (res[0].height + 250 + 300)
				})
			},
			getenterpriseId() {
				let param = {
					id: this.cateid,
				}
				GetenterpriseId(param).then((res) => {
					this.details = res.data
				})
			},
			onButtClick() {
				uni.navigateTo({
					url: `/pages/enterprise/Application?cateid=${this.cateid}&leftid=${this.leftid}`,
				});
			},
			optionClick(e) {
				if (e.index == 0) {
					if (this.details.contactMobile) {
						uni.makePhoneCall({
							phoneNumber: this.details.contactMobile //仅为示例
						});
						return
					}
				}

			},


		}
	}
</script>

<style lang="scss" scoped>
	.name {
		color: #232323;
		line-height: 1.2;
		letter-spacing: 2rpx;
	}
.image{
	min-height: 6000rpx;
	width: 100%;
	image{
		min-height: 6000rpx;
		width: 100%;
	}
}
	.prompt {
		color: #1999e8;
	}

	.box {
		position: relative;

		.top {
			width: 100%;
			height: 250rpx;
			background: linear-gradient(to bottom, #0074d9, #ffffff);
			position: absolute;
			top: 0;
			left: 0;
		}

		.bootm {
			width: 100%;
			position: absolute;
			top: 80rpx;
			left: 0;

			padding-bottom: 200rpx;
		}
	}

	.Information {
		margin-top: 20rpx;
		font-size: 40rpx;
	}
</style>